<template>
  <el-card shadow="never">
    <el-scrollbar class="notOpen">
      <div class="not_box center_box" v-if="!isShow">
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <p class="title">您还未配置楼视账号，<span class="set" @click="goConfig">前往设置</span></p>
      </div>
      <div class="config_box center_box" v-if="isShow">
        <el-form-item class="bottom_btn" label-width="0px">
          <p class="title">配置楼视账号</p>
        </el-form-item>
        <el-form ref="ruleFormRef" :model="configForm" :rules="rules" label-width="70px" class="demo-ruleForm" :size="formSize">
          <el-form-item label="对接参数" prop="name">
            <el-input v-model="configForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="对接参数" prop="name">
            <el-input v-model="configForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="对接参数" prop="name">
            <el-input v-model="configForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="对接参数" prop="name">
            <el-input v-model="configForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item class="bottom_btn" label-width="0px">
            <el-button type="primary" class="btn" size="small" @click="submitForm(ruleFormRef)">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </el-card>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'

  const ruleFormRef = ref()
  const isShow = ref(false)
  const formSize = ref('default')
  const configForm = reactive({})
  const rules = reactive({})

  const goConfig = () => {
    isShow.value = true
  }
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
</script>

<style lang="scss">
  .notOpen {
    height: calc(100vh - 200px);
    position: relative;
    overflow-y: auto;
    .center_box {
      position: absolute;
      left: 50%;

      text-align: center;
    }
    .not_box {
      top: 50%;
      transform: translate(-50%, -50%);
      .title {
        font-size: 14px;
        color: #969696;
        .set {
          color: #ff6b00;
          cursor: pointer;
        }
      }
    }
    .config_box {
      top: 125px;
      transform: translateX(-50%);
      .title {
        font-weight: 500;
        color: #33302d;
        font-size: 18px;
        margin-bottom: 7px;
      }
      .bottom_btn {
        text-align: center;
        .btn {
          padding: 11px 50px;
        }
      }
    }
    .el-form-item {
      margin-bottom: 24px;
    }
    .el-input__inner {
      width: 440px;
    }
  }
</style>
